<!--显示查询方式-->
<template>
  <div class="flex flex-wrap items-center" style="float:left; margin-right:10px;">
    <el-dropdown @command="kindClick" @visible-change="mychange">
      <el-button type="primary" plain style="width:75px;">
         {{findKindDict[state.findModel[columnId].useKind].name}}
        <arrow-down-bold v-show="isUp" class="findkind-icon"/>
        <arrow-right-bold v-show="!isUp" class="findkind-icon"/>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item 
            v-for="(kindId, index) in state.findModel[columnId].findKind"
            :key="index"
            :command="kindId"
          >
            {{findKindDict[kindId].name}}
          </el-dropdown-item>
          <!--日期控件的切换-->
          <el-dropdown-item command="date"> 日期 </el-dropdown-item>
          <el-dropdown-item command="month"> 年月 </el-dropdown-item>
          <el-dropdown-item command="year"> 年 </el-dropdown-item>
          <!--下拉和选择-->
          <el-dropdown-item command="check"> 平铺 </el-dropdown-item>
          <el-dropdown-item command="select"> 下拉 </el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script>
  import { defineComponent, ref } from 'vue'
  import { ArrowDownBold, ArrowRightBold } from '@element-plus/icons-vue'
  import { getFindState } from '../state/state-find'
  import { findKindDict } from '../../map'

  /**
   * 选择查询方式，每个查询字段前设置
   */
  export default defineComponent({
    name: 'nf-el-find-kind',
    components: {
      ArrowDownBold,
      ArrowRightBold
    },
    props: {
      columnId: [Number, String]
    },
    setup (props, context) {
      // console.log('props-查询方式：', props)
      
      const state = getFindState()
  
      // 选择查询方式
      const kindClick = (command) => {
        if (command === command * 1) {
          state.findModel[props.columnId].useKind = command
        } else {
          // 切换日期控件类型
        }
      }

      // 修改 图标
      const isUp = ref(false)
      const mychange = (val) => {
        isUp.value = val
      }

      return {
        isUp,
        mychange,
        kindClick,
        findKindDict,
        state
      }
    }
  })
</script>

<style>
.findkind-icon {
  color:#d8cec6; width: 1.0em; height: 1.0em; margin-left: 8px;margin-right: 8px;margin-top: 1px;
}
.example-showcase .el-dropdown + .el-dropdown {
  margin-left: 15px;
}
.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
</style>
